<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fnx" uri="http://java.sun.com/jsp/jstl/functionsx" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="f" uri="http://www.sctv.com/tags/form" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<style>
    td{
        word-break: break-all;
        /*wordw*/
    }
</style>
<script>
    var now=1;
    var big=0;
    var size=10;
    //上一页
    function pre(){
        now=now==1?1:now-1
        initgrid(now,size);
    }
    //下一页
    function next(){
        now=now==big?big:now+1
        initgrid(now,size);
    }
    //查询方法
    function  searchVideos() {
        initgrid(now,size);
    }


    //更改页码
    function changePage(tempSize){
        size=tempSize;
        initgrid(1,size);
    }
    function initgrid(currtPage,pageSize) {
        var productName=$("#productName").val();
        var startTimeStr=$("#startTime").val();
        var endTimeStr=$("#endTime").val();
        $.ajax({
            url: "/cmscp/ext/info/getProducts.do",
            data: {name:productName,page:currtPage,page_size:pageSize},
            type: "POST",
            success: function (data) {
                var html = "";
                var lists = data.content;

                for (var v = 0; v < lists.length; v++) {
                    html += '<tr onclick="getClick(this)"><td style="display: none">'+JSON.stringify(lists[v])+'<td>'+lists[v].code+'</td><td>'+lists[v].name+'</td><td><img src="'+lists[v].defaultPicture+'" style="width:150px;height: 80px" /></td><td>'+lists[v].intro+'</td></tr>';
                }
                $("#bodyContent").html(html);
                $("#totalCount").html(data.totalElements);
                big=data.totalPages;
                $("#now").html(currtPage);
            }
        });
        console.log(currtPage,pageSize);
    }
    //点击获取
    function getClick(dom){
        debugger;
        var josnInfo=$(dom).children().eq(0).html();
        var pro=JSON.parse(josnInfo);
        f7OnClick(pro.code,pro.name);
        $("#f7_ok").click();
    }
    initgrid(1,20);

    function f7OnClick(code,name) {
        $("#f7_id").val(code);
        $("#f7_id_Title").val(code);
    }
</script>
<div class="box-body table-responsive">
    <input type="hidden" id="f7_id" value=""/>
    <input type="hidden" id="f7_id_Title" value=""/>
    <form id="searchForm" action="/cmscp/ext/info/getProducts.do" method="get" class="form-inline ls-search">
        <div class="form-group">
            <label for="productName">商品名称</label>
            <input class="form-control input-sm" type="text" id="productName" name="productName" value="" style="width:250px;"/>
        </div>
        <button class="btn btn-default btn-sm" type="button" style="font-size: 14px;" onclick="searchVideos()">查询</button>

    </form>
    <form method="post">
        <tags:search_params/>


        <table id="pagedTable" style="table-layout: fixed" class="table table-condensed table-bordered table-hover ls-tb">
            <thead id="sortHead" >
            <tr class="ls_table_th">
                <th width="200px;">编码</th>
                <th width="200px;">商品名称</th>
                <th width="150px;" >商品图片</th>
                <th width="200px;">简介</th>
            </tr>
            </thead>
            <tbody id="bodyContent">

            </tbody>
        </table>
    </form>
    <div class="pull-right" style="padding:0 6px;">
        &nbsp;每页
        <select class="form-control" id="pageSize" onchange="changePage($(this).val())" style="border-radius:4px;padding-left:3px;padding-right:3px;width:60px;display:inline-block;">
            <option>20</option>
        </select>
        条 &nbsp; 共<span id="totalCount"></span>  条
    </div>
    <ul class="pagination pull-right" style="margin:0;">
        <li>
            <a href="javascript:;"  id="pre" onclick="pre()"  aria-label="上一页">
                <span aria-hidden="true">«</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <span id="now">1</span>
            </a>
        </li>
        <li>
            <a href="javascript:;" id="next" onclick="next()" aria-label="下一页">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>
</div>

